<template>
  <div>
    <el-container>
      <el-header>
        <el-row type="flex" justify="space-around" class="head_row">
          <el-col :xs="4" :sm="6" :md="4" :lg="3" :xl="3" class="brand_title">
            <h1>
              <a href="#">Book U Like</a>
            </h1>
          </el-col>
          <el-col class="hidden-md-and-down" :lg="11" :xl="8">
            <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
              <el-menu-item index="1">首页</el-menu-item>
              <el-menu-item index="2">商家推荐</el-menu-item>
              <el-menu-item index="3">个性化推荐</el-menu-item>
              <el-menu-item index="4">新书上架</el-menu-item>
              <el-menu-item index="5">热卖图书</el-menu-item>
              <el-menu-item index="6">猜你喜欢</el-menu-item>
            </el-menu>
          </el-col>
          <el-col :xs="8" :sm="7" :md="8" :lg="5" :xl="5">
            <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input2"></el-input>
          </el-col>
          <el-col :xs="12" :sm="10" :md="8" :lg="4" :xl="5">
            <el-row type="flex" justify="space-between" class="head_row">
              <el-col class="hidden-xs-only" :lg="10" :span="8">
                <el-popover placement="bottom" trigger="hover" width="300">
                  <div style="width:100%;height:200px;">我的购物车，，商品数目</div>
                  <el-button slot="reference" round>购物车</el-button>
                </el-popover>
              </el-col>
              <el-col :xs="24" :lg="14" :span="15">
                <!-- <el-menu mode="horizontal" @select="handleSelect">
                  <el-menu-item index="7">
                    <a href="#">登录</a>
                  </el-menu-item>
                  <el-menu-item index="8">
                    <a href="#">注册</a>
                  </el-menu-item>
                </el-menu>-->

                <!-- <a href="#" target="_blank">
                  <el-badge :value="12" class="item">
                    <i class="el-icon-bell"></i>
                  </el-badge>
                </a>-->
                <el-popover placement="bottom" trigger="hover" width="300">
                  <div style="width:100%;height:200px;">我的gerenzhongxin</div>
                  <div slot="reference" class="do_flex">
                    <span>个人中心</span>
                    <el-avatar
                      src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                    ></el-avatar>
                  </div>
                </el-popover>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-header>
    </el-container>
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.brand_title {
  text-align: center;
}
.head_row {
  align-items: center;
  background-color: white;
}
.el-header {
  padding: 0;
}
.do_flex {
  align-items: center;
  display: flex;
}
</style>

<script>
export default {
  name: 'Navbar',
  data () {
    return {
      activeIndex: '1',
      input2: ''
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>
